<template>
	<!-- 认证 -->
	<view class="wrap">
		<view class="mar-top-20 input-group">
			<view class="input-row border-bottom-1px" v-if="authData.auditStatus">
				<text class="title">资料填写状态</text>
				<view v-if="authData.auditStatus == 1" class="fc-52c mar-right-20">审核通过</view>
				<view v-if="authData.auditStatus == 2" class="fc-df5 mar-right-20">审核失败</view>
				<view v-if="authData.auditStatus == 3" class="fc-df5 mar-right-20">已停用</view>
				<view v-if="authData.auditStatus == 0" class="fc-f1a mar-right-20">待审核</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">机构名称</text>
				<view class="input-row-item">
					<input class="padding-10" :disabled="disabledFlag" placeholder="请输入机构名称"
						v-model="authData.organizationName" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">类别</text>
				<view class="picker row align-width">
					<picker @change="categoryChange" :disabled="disabledFlag" :value="categorValue" range-key="name"
						:range="categorOption" class="pickstyle">
						<input class="padding-10" disabled="true" placeholder="请选择" :value="authData.categoryName" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">logo</text>
				<view class="input-row-item">
					<view class="heads-img" @click="uploadImgs(1)">
						<image :src="authData.logo || 'https://web.suqzp.com/public/addImage.png'"></image>
					</view>
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">联系人</text>
				<view class="input-row-item">
					<input class="padding-10" :disabled="disabledFlag" type="text" placeholder="请输入联系人"
						v-model="authData.contactName" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">联系方式</text>
				<view class="input-row-item">
					<input class="padding-10" :disabled="disabledFlag" maxlength="11" type="number"
						placeholder="请输入联系方式" v-model="authData.contactPhone" />
				</view>
			</view>
			<view class="input-row border-bottom-1px">
				<text class="title">所属行业</text>
				<view class="picker row align-width">
					<picker @change="industryChange" :disabled="disabledFlag" :value="industryValue"
						range-key="dictLabel" :range="industryOption" class="pickstyle">
						<input class="padding-10" disabled="true" placeholder="请选择所属行业"
							:value="authData.industryName" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="border-bottom-1px bg-ff i-1" style="padding-bottom: 30rpx;">
				<text class="title  pad-top-20 dis-block pad-left-25" style="width: 40%;">营业执照</text>
				<view class="head-img mar-top-15 pad-left-25" @click="uploadImgs(2)">
					<image
						:src="authData.licenseImg || 'https://web.suqzp.com/public/addImage.png'">
					</image>
				</view>
			</view>
		</view>
		<view class="flex mar-top-40">
			<radio-group @click="radioGroup">
				<radio color="#84C0F4" :checked="checkedIndex" :disabled="disabledFlag" style="transform:scale(0.72);">
				</radio>
			</radio-group>
			<view class="agreement2">
				已同意并同意《***协议》
			</view>
		</view>
		<view class="btn-row row">
			<button v-if="authData.auditStatus == 2" type="primary" class="btn-save width-90"
				@tap="register(2)">重新提交</button>
			<button v-else-if="authData.auditStatus == 0" disabled type="primary" class="btn-save width-90">审核中</button>
			<button v-else-if="authData.auditStatus == 1" disabled type="primary"
				class="btn-save width-90">审核通过</button>
			<button v-else-if="authData.auditStatus == 3" disabled type="primary" class="btn-save width-90">已停用</button>
			<button v-else type="primary" class="btn-save width-90" @tap="register(1)">提交</button>
		</view>
	</view>
</template>

<script>
	import uploadImage from '@/common/ossutil/uploadFile';
	import {
		mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				authData: {
					organizationName: '',
					categoryId: '',
					logo: '',
					contactName: '',
					contactPhone: '',
					industryName: '',
					licenseImg: '',
				},
				tmpImageUrl: '',
				categorOption: [],
				industryOption: [],
				checkedIndex: false,
				disabledFlag: false, // 根据审核状态控制 是否禁用
			}
		},
		async onLoad() {
			await this.getCategory()
			await this.getIndustry()
			await this.getUserCollegeInfo()
		},
		methods: {
			// 根据用户Id获取 判断用户是否申请过加入 商学院 且展示商学院审核状态 是否可编辑
			getUserCollegeInfo() {
				this.$apis.getCollegeByWxUserId(this.userInfo.id).then(res => {
					if (res.data) {
						this.checkedIndex = true;
						this.authData = res.data;
						let categoryItem = this.getValueById(this.categorOption, 'id', this.authData.categoryId)
						this.authData.categoryName = categoryItem.name
						// 判断审核状态 审核中不可编辑
						this.disabledFlag = res.data.auditStatus != 2 ? true : false;
					}
				})
			},
			// 点击注册按钮
			async register(type) {
				if (!this.checkRoule()) return
				// 过了校验之后那wxUserId
				this.authData.wxUserId = this.userInfo.id
				// 判断是否重新审核 状态改为 待审核
				if (type == 2) {
					this.authData.auditStatus = 0
					// 调用更新接口 
					let res = await this.$apis.eidCollege(this.authData);
					if (res) {
						uni.showToast({
							title: '提交成功'
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1200)
					} else {
						uni.showToast({
							title: '提交失败'
						})
					}
				} else {
					let res = await this.$apis.addCollege(this.authData);
					if (res) {
						uni.showToast({
							title: '提交成功'
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
						}, 1200)
					} else {
						uni.showToast({
							title: '提交失败'
						})
					}
				}
			},
			// 获取类别
			getCategory() {
				this.$apis.getCategoryList().then(res => {
					this.categorOption = res.data
				})
			},
			// 选择类别
			categoryChange(e) {
				this.authData.categoryId = this.categorOption[e.detail.value].id
				this.authData.categoryName = this.categorOption[e.detail.value].name
			},
			// 获取企业行业 字典查询
			getIndustry() {
				this.$apis.getDictTypeList('enterprise_industry').then(res => {
					this.industryOption = res.data
				})
			},
			// 选择行业
			industryChange(e) {
				this.authData.industryId = this.industryOption[e.detail.value].dictValue
				this.authData.industryName = this.industryOption[e.detail.value].dictLabel
			},
			// 选择营业执照 或 logo
			uploadImgs(type) {
				if (this.disabledFlag) return;
				var that = this
				uni.chooseImage({
					success(res) {
						let tempFilePaths = res.tempFilePaths;
						that.tmpImageUrl = tempFilePaths[0];
						that.uploadFile(type);
					}
				});
			},
			// 协议勾选
			radioGroup() {
				this.checkedIndex = !this.checkedIndex
			},
			// 上传图片
			uploadFile(type) {
				uni.showLoading({
					title: '图片上传中'
				});
				uploadImage(0, this.tmpImageUrl, 'person/collegeauth/', result => {
					if (type == 1) {
						this.authData.logo = result
					} else if (type == 2) {
						this.authData.licenseImg = result
					}
					uni.hideLoading();
				});
			},
			// 获取对应value
			getValueById(arr, key, value) {
				return arr.find(item => {
					return item[key] == value
				})
			},
			// 校验
			checkRoule() {
				var reg = /^1[0-9]{10,10}$/;
				if (!this.authData.organizationName) {
					uni.showToast({
						icon: 'none',
						title: '请输入机构名称'
					});
					return false;
				}
				if (!this.authData.categoryId) {
					uni.showToast({
						icon: 'none',
						title: '请选择机构类别'
					});
					return false;
				}
				if (!this.authData.contactName) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人'
					});
					return false;
				}
				if (!this.authData.contactPhone) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系手机号'
					});
					return false;
				}
				if (!reg.test(this.authData.contactPhone)) {
					uni.showToast({
						icon: 'none',
						title: '联系手机号错误'
					});
					return false;
				}
				if (!this.authData.industryName) {
					uni.showToast({
						icon: 'none',
						title: '请选择所属行业'
					});
					return false;
				}
				if (!this.authData.licenseImg) {
					uni.showToast({
						icon: 'none',
						title: '请选择营业执照'
					});
					return false;
				}
				if (!this.checkedIndex) {
					uni.showToast({
						icon: 'none',
						title: '请阅读并勾选协议'
					});
					return false;
				}
				return true;
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #f6f6f6;

		.input-group {
			border-radius: 8rpx;

			.border-bottom-1px {
				position: relative;

				&::after {
					position: absolute;
					z-index: 1;
					right: 0;
					bottom: 0;
					left: 20upx;
					height: 1upx;
					content: '';
					-webkit-transform: scaleY(0.5);
					transform: scaleY(0.5);
					background-color: #e2e2e2;
				}
			}

			.input-row {
				display: flex;
				flex-direction: row;
				position: relative;
				background: #fff;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;

				.yzb-next {
					color: $font-color-999;
					text-align: center;
					font-size: 48rpx;
					position: relative;
					top: 13rpx;
				}

				.title {
					width: 25%;
					padding: 20upx 0;
					padding-left: 30upx;
					line-height: 50upx;
					color: #333;
				}

				.pickstyle {
					width: 460rpx;

					input {
						font-size: 28rpx;
						text-align: left;
						height: 60rpx;
					}
				}

				.input-row-item {
					width: 568rpx;

					.remarktextarea {
						height: 205rpx;
						width: 494rpx;
					}

					input {
						text-align: left;
						font-size: 28rpx;
					}
				}
			}
		}

		.heads-img {
			width: 84rpx;
			height: 80rpx;

			image {
				width: 84rpx;
				height: 80rpx;
				display: block;
			}
		}

		.head-img {
			width: 222rpx;
			height: 232rpx;
			border-radius: 8rpx;

			image {
				width: 222rpx;
				height: 232rpx;
				display: block;
			}
		}

		.agreement2 {
			position: relative;
			top: 4px;
		}

		.btn-row {
			width: 100%;
			box-sizing: border-box;

			.btn-save {
				background-color: #84C0F4;
				height: 90upx;
				line-height: 90upx;
				font-size: $font-size-34;
			}

			.width-55 {
				width: 55%;
			}

			.width-90 {
				width: 90%;
				margin: 60rpx auto;
			}
		}
	}
</style>
